import React, { useEffect, useState } from 'react'
import _ from 'lodash'

let run = 'right'
let snake_x = 0
let snake_y = 0
let timeOut = null

const Snake = () => {
  const [show, setShow] = useState(false)
  const [find, setFind] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  const [findShow, setFindShow] = useState(false)

  useEffect(() => {
    if (show) {
      timeOut = setInterval(() => {
        runSnake()
      }, 100)
    }
    return () => {
      clearTimeout(timeOut)
    }
  }, [show])
  useEffect(() => {
    document.onkeydown = function (evt) {
      let e = evt || event
      let keyCode = e.keyCode || e.which

      switch (keyCode) {
        case 37:
          run = 'left'
          break
        case 38:
          run = 'top'
          break
        case 39:
          run = 'right'
          break
        case 40:
          run = 'bottom'
          break
      }
    }
  }, [])
  useEffect(() => {
    let fd = document.getElementById('food')
    // eslint-disable-next-line radix
    fd.style.left = parseInt(Math.random() * (49 + 1 - 1) + 1) * 10 + 'px'
    // eslint-disable-next-line radix
    fd.style.top = parseInt(Math.random() * (49 + 1 - 1) + 1) * 10 + 'px'

    findShow && setFind([...find, new Date().getTime()])
  }, [findShow])

  const runSnake = () => {
    switch (run) {
      case 'right':
        snake_x += 10
        break
      case 'left':
        snake_x -= 10
        break
      case 'top':
        snake_y -= 10

        break
      case 'bottom':
        snake_y += 10

        break
      default:
        break
    }
    // start
    // 核心代码
    // 100 - 80 - 60 - 40 - 20 - 0
    const box = document.querySelectorAll('.box')
    for (let i = box.length - 1; i > 0; i--) {
      box[i].style.left = box[i - 1].style.left
      box[i].style.top = box[i - 1].style.top
    }
    box[0].style.left = snake_x + 'px'
    box[0].style.top = snake_y + 'px'
    for (let i = box.length - 1; i > 0; i--) {
      if (
        // eslint-disable-next-line radix
        parseInt(box[i].style.left) === parseInt(box[0].style.left) &&
        // eslint-disable-next-line radix
        parseInt(box[i].style.top) === parseInt(box[0].style.top)
      ) {
        run = 'right'
        snake_x = 0
        snake_y = 0
        for (let i = box.length - 1; i >= 0; i--) {
          box[i].style.left = '0px'
          box[i].style.top = '0px'
        }
        setShow(false)
        alert('自己吃自己????')
        return
      }
    }

    // end
    const head = document.querySelector('.head')
    if (
      // eslint-disable-next-line radix
      parseInt(head.style.left) < 0 ||
      // eslint-disable-next-line radix
      parseInt(head.style.left) > 490 ||
      // eslint-disable-next-line radix
      parseInt(head.style.top) < 0 ||
      // eslint-disable-next-line radix
      parseInt(head.style.top) > 490
    ) {
      run = 'right'
      snake_x = 0
      snake_y = 0
      for (let i = box.length - 1; i >= 0; i--) {
        box[i].style.left = '0px'
        box[i].style.top = '0px'
      }
      setShow(false)
      alert('眼瞎吗????,都撞墙上了!!!!')
      return
    }
    let fd = document.getElementById('food')
    if (
      // eslint-disable-next-line radix
      Math.abs(parseInt(fd.style.left)) === snake_x &&
      // eslint-disable-next-line radix
      Math.abs(parseInt(fd.style.top)) === snake_y
    ) {
      setFindShow({})
    }
  }
  const start = () => {
    setShow(true)
  }
  const end = () => {
    setShow(false)
  }
  function colorRgb() {
    // eslint-disable-next-line radix
    let color1 = parseInt(Math.random() * 256)
    // eslint-disable-next-line radix
    let color2 = parseInt(Math.random() * 256)
    // eslint-disable-next-line radix
    let color3 = parseInt(Math.random() * 256)
    return `rgb(${color1},${color2},${color3})`
  }

  return (
    <div>
      <button onClick={start}>开始游戏</button>
      <button onClick={end}>停止</button>
      <span>分数: {find.length}</span>
      <div id="content">
        <div className="box head"></div>
        {_.map(find, (item, key) => {
          return (
            <div
              className="box"
              style={{ background: colorRgb() }}
              key={item}
            ></div>
          )
        })}

        <div id="food"></div>
      </div>
    </div>
  )
}

export default Snake
